<template>
  <el-container v-if="!isIndexPage">
    <el-header class="head-style d-flex">
      <head-content></head-content>
    </el-header>
    <el-container>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  <router-view v-else></router-view>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import headContent from '@/components/head-content.vue'; // @ is an alias to /src
import imoocContainer from './container.vue';
import { debounce } from './util/debounce';
export default defineComponent({
  name: 'HomeView',
  data() {
    return {
      isIndexPage: true,
    };
  },
  components: {
    headContent,
    imoocContainer,
  },
  watch: {
    $route(from, to) {
      this.isIndexPage = Object.is('/', location.pathname);
      this.calculate();
    },
  },
  methods: {
    calculate() {
      console.log('xxx');
      const w = 1920;
      const h = 1080;
      let { clientWidth, clientHeight } = document.documentElement;
      let path = location.pathname;
      let app;
      if (this.$route.name && path === '/assist/screen-data') {
        Promise.resolve().then(() => {
          if (path === '/') {
            app = document.getElementById('app');
          } else {
            let indexApp = document.getElementById('app');
            if (indexApp) {
              indexApp.style.transform = ``;
              indexApp.style.width = '';
              indexApp.style.height = '';
            }
            app = document.getElementById('big-screen');
            app.style.transform = ``;
            app.style.width = '';
            app.style.height = '';
            clientWidth = app.clientWidth;
            clientHeight = app.clientHeight;
          }
          let wScale = clientWidth / w;
          let hScale = clientHeight / h;
          if (app) {
            app.style.transform = `scale(${wScale},${hScale})`;
            app.style.width = '1920px';
            app.style.height = '1080px';
          }
        });
      } else {
        app = document.getElementById('app');
        if (app) {
          app.style.transform = ``;
          app.style.width = '';
          app.style.height = '';
        }
      }
    },
  },
  mounted() {
    this.calculate();
    window.addEventListener('resize', debounce(200, this.calculate));
  },
});
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app {
  transform-origin: left top;
}
.hidden {
  opacity: 0;
  position: absolute;
  z-index: -10000;
}
.head-style {
  background: linear-gradient(241deg, rgb(0, 125, 243), rgb(5, 84, 188) 52%);
  height: 64px;
  line-height: 64px;
  padding: 0;
}
.main {
  padding: 0;
}
</style>
